<template>
  <div id="app">
      <wrap-form :model="model" :rules="rules">
        <form-item lable='用户名称' prop='username'>
          <input-item v-model="model.username"></input-item>
        </form-item>

        <form-item lable='密码' prop='password'>
          <input-item v-model="model.password"></input-item>
        </form-item>
      </wrap-form>
  </div>
</template>

<script>
import InputItem from './components/KInput'
import FormItem from './components/FormItem'
import wrapForm from './components/WrapForm'
export default {
  name: 'app',
  components: {
     InputItem,
     FormItem,
     wrapForm
  },
  data() {
    return {
       model: { username: "tom", password: "" },
       rules: {
            username: [
              { required: true, message: "请输入用户名" },
              {min: 6,max:10,message:'请输入6~10的用户名'}
            ],
            password: [
              { required: true, message: "请输入密码" }
            ],
       }
    }
  },
  watch:{
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
